﻿@page "/gantt-chart/column-reordering"
@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the reordering feature of the Gantt columns. You can reorder columns by simply dragging and dropping them to the desired position.</p>
</SampleDescription>
<ActionDescription>
    <p>Reordering can be enabled by setting the <code>AllowReordering</code> property to true. Reordering can be done by dragging and dropping the column header from one index to another index within the TreeGrid part.</p>    
    <p>In this demo, you can reorder columns by dragging and dropping the column name.</p>
    <p>More information about Column Reorder can be found in this <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/gantt-chart/columns/#reordering'>documentation</a></code> section.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" AllowReordering="true" HighlightWeekends="true" 
                    ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                                 Duration="Duration" Progress="Progress" ParentID="ParentId" Dependency="Predecessor">
                </GanttTaskFields>
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData"></GanttLabelSettings>
                <GanttSplitterSettings Position="50%"></GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    }
}
